<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



</head>

<body>

<div style="padding:0px; margin:0px;">
 <ul class="breadcrumb" style=" padding:0px; padding-left:20px;" >
  <li ><a href="#">首页</a></li>
  <li>工作台</li>
</ul>
</div>

<div class="row " style="padding:1px; margin:0px;"  >
	<div class="col-sm-8">
        <div class="panel panel-default" >
          <div class="panel-heading" style=" padding:3px;height:30px;"  >
            <span class="glyphicon glyphicon-refresh"></span>销售品类分布
          </div>
              <div class="panel-body" id="main" style="width: 700px;height: 400px;">

                  <%--添加品类排行榜Echarts--%>
              </div>
        </div>
    </div>
 	<div class="col-sm-4">
            <div class="panel panel-default">
          <div class="panel-heading"  style=" padding:3px;height:30px;"  >
            <span class="glyphicon glyphicon-refresh"></span>今日销量Top5
          </div>
   <table id="table1" class="table table-bordered">
       <tr>
           <th>商品</th>
           <th>销量</th>
           <th>金额</th>
       </tr>

	</table>  
        </div> </div>
	<div class="col-sm-6">
        <div class="panel panel-default" >
          <div class="panel-heading" style=" padding:3px;height:30px;"  >
            <span class="glyphicon glyphicon-refresh"></span>前十供应商销售量
          </div>
              <div class="panel-body" id="main2" style="width: 500px;height: 400px;">

              </div>
        </div>
    </div>
	<div class="col-sm-6">
        <div class="panel panel-default" >
          <div class="panel-heading" style=" padding:3px;height:30px;"  >
            <span class="glyphicon glyphicon-refresh"></span>订单数量分布图
          </div>
              <div class="panel-body" id="main3" style="width: 500px;height: 400px;">

              </div>
        </div>
    </div>
 	<div class="col-sm-4">
            <div class="panel panel-default">
          <div class="panel-heading"  style=" padding:3px;height:30px;"  >
            <span class="glyphicon glyphicon-refresh"></span>近期商品预警
          </div>
   <table id="table2" class="table table-bordered" >
	<tr >
        <th>商品条码</th>
    	<th>商品名称</th>
        <th>保质期限</th>
    </tr>

	</table>  
        </div>
    </div>
 	<div class="col-sm-4">
            <div class="panel panel-default">
          <div class="panel-heading"  style=" padding:3px;height:30px;">
            <span class="glyphicon glyphicon-refresh"></span>库存预警
          </div>
   <table id="table3" class="table table-bordered" >
	<tr >
        <th>商品条码</th>
        <th>商品名称</th>
        <th>库存数量</th>
    </tr>

	</table>  
        </div>
    </div>
    <div class="col-sm-4">
        <div class="panel panel-default">
            <div class="panel-heading"  style=" padding:3px;height:30px;"  >
                <span class="glyphicon glyphicon-refresh"></span>公告
            </div>
            <div class="panel-body">公告</div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/Echarts.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script>
/*异步交互实现*/

$(function () {
    $.post("bootmServlet?id=0",
        {
        }
        ,function (data) {
            for(let i=0;i<data.length;i++){
                $("#table1").append('<tr>' +
                    '<td>'+data[i].product_name+'</td>' +
                    '<td>'+data[i].sale_count+'</td>\n' +
                    '<td>'+data[i].sale_amount+'</th>\n' +
                    '</tr>');
            }
        },"json");
    $.post("bootmServlet?id=1",
        {
        }
        ,function (data) {
            for(let i=0;i<data.length;i++){
                $("#table2").append('<tr>' +
                    '<td>'+data[i].bar_code+'</td>' +
                    '<td>'+data[i].product_name+'</td>\n' +
                    '<td>'+data[i].exp_date+'</th>\n' +
                    '</tr>');
            }
        },"json");
    $.post("bootmServlet?id=2",
        {
        }
        ,function (data) {
            for(let i=0;i<data.length;i++){
                $("#table3").append('<tr>' +
                    '<td>'+data[i].bar_code+'</td>' +
                    '<td>'+data[i].product_name+'</td>\n' +
                    '<td>'+data[i].stock_count+'</th>\n' +
                    '</tr>');
            }
        },"json");

<%--    以下是Echats图--%>

$.post("EchartsServlet",
    {
    }
    ,function (data) {
         var myChart = echarts.init(document.getElementById('main'));
        option = {
        xAxis: {
            type: 'category',
            data: data[0][0]
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: data[0][1],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };

    myChart.setOption(option);
    /*
    * 供应商分布图
    * */
        var myChart2 = echarts.init(document.getElementById('main2'));
        option2 = {
            title: {
                text: '前十供应商年销售量',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                left: 'center',
                top: 'bottom',
                data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [30, 110],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    data: [
                        {value: 20, name: 'rose1'},
                        {value: 5, name: 'rose2'},
                        {value: 15, name: 'rose3'},
                        {value: 25, name: 'rose4'},
                        {value: 20, name: 'rose5'},
                        {value: 35, name: 'rose6'},
                        {value: 30, name: 'rose7'},
                        {value: 40, name: 'rose8'}
                    ]
                }
            ]
        };


        myChart2.setOption(option2);


    },"json");
//用于显示进货量和销售量异步交互
    $.post("EchartsDateServlet",{},function (data) {
    /*
         * 一年销售和进货量
         * */
    var myChart3 = echarts.init(document.getElementById('main3'));
    var colors = ['#5793f3', '#d14a61', '#675bba'];
    console.log(data);
    var data3=data;
    option3 = {
        color: colors,
        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data:['2020销售量', '2020进货量']
        },
        grid: {
            top: 70,
            bottom: 50
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '进货量  ' + params.value
                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ['2020-1', '2020-2', '2020-3', '2020-4', '2020-5', '2020-6', '2020-7', '2020-8', '2020-9', '2020-10', '2020-11', '2020-12']
            },
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '销售量  ' + params.value
                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ['2020-1', '2020-2', '2020-3', '2020-4', '2020-5', '2020-6', '2020-7', '2020-8', '2020-9', '2020-10', '2020-11', '2020-12']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '2020销售量',
                type: 'line',
                xAxisIndex: 1,
                smooth: true,
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name: '2020进货量',
                type: 'line',
                smooth: true,
                data: data3
            }
        ]
    };

    myChart3.setOption(option3);



},"json");



});
</script>
</body>

</html>
